<template>
  <div class="song-list">
    <ul>
      <li v-for="(item, index) in songs" :key="index" :data-id="item.id" class="item" @click="selectItem(item, index)">
        <div v-show="rank" class="rank">
          <span :class="getRankCls(index)" class="icon">{{ getRankText(index) }}</span>
        </div>
        <div class="content">
          <h2 class="name">{{ item.name }}</h2>
          <p class="desc">{{ getDesc(item) }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default{
  props: {
    songs: {
      type: Array,
      default: () => []
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getDesc (item) {
      return item.singer + ' - ' + item.album
    },
    getRankCls (index) {
      // return index === 0 ? 'icon0' : index === 1 ? 'icon1' : index === 2 ? 'icon2' : 'text'
      if (index <= 2) {
        return `icon${index}`
      } else {
        return 'text'
      }
    },
    getRankText (index) {
      if (index > 2) {
        return index + 1
      } else {
        return ''
      }
    },
    selectItem (item, index) {
      this.$emit('select', item, index)
    }
  }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';
  .song-list
    .item
      display flex;
      align-items center;
      height 64px;
      font-size $font-size-medium;
      .rank
        width 25px;
        height 25px;
        margin-right 25px;
        .icon
          display inline-block;
          width 100%;
          height 100%;
          background-size 100% 100%;
          background-repeat no-repeat;
          background-position 50% 50%;
          &.icon0
            bg-image(first);
          &.icon1
            bg-image(second);
          &.icon2
            bg-image(third);
          &.text
            text-align center;
            line-height 25px;
            color $color-theme;
            font-size $font-size-large;
      .content
        flex 1;
        .name
          display: -webkit-box;
          overflow: hidden;
          white-space: normal!important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        .desc
          line-height 1.4;
          color $color-text-d;
          line-height 1.4;
          margin-top 8px;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal!important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
</style>
